<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>首页 - 转炉终点预测系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="styles/unified.css">
    <link rel="stylesheet" href="styles/components.css">
    <link rel="stylesheet" href="styles/sidebar-theme.css">
    <link rel="stylesheet" href="styles/scale-fix.css">
    <link rel="stylesheet" href="styles/modal-dialog.css">
    <style>
        /* 控制面板特定样式 */
        .dashboard-cards {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .dashboard-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px;
            transition: transform 0.3s, box-shadow 0.3s;
            position: relative;
            overflow: hidden;
        }
        
        .dashboard-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
        }
        
        .dashboard-card:before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle at top right, rgba(255,255,255,0.3), transparent 70%);
            z-index: 0;
        }
        
        .dashboard-card-content {
            z-index: 1;
        }
        
        .dashboard-card-value {
            font-size: 28px;
            font-weight: 700;
            color: var(--primary-dark);
        }
        
        .dashboard-card-label {
            color: var(--gray);
            margin-top: 5px;
            font-size: 14px;
        }
        
        .dashboard-card-icon {
            width: 60px;
            height: 60px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            z-index: 1;
            transition: transform 0.3s;
        }
        
        .dashboard-card:hover .dashboard-card-icon {
            transform: scale(1.1);
        }
        
        .trend-indicator {
            display: flex;
            align-items: center;
            font-size: 12px;
            margin-top: 8px;
            font-weight: 500;
        }
        
        .trend-indicator.up {
            color: #4caf50;
        }
        
        .trend-indicator.down {
            color: #f44336;
        }
        
        .trend-indicator i {
            margin-right: 5px;
            font-size: 10px;
        }
        
        .section-title {
            font-size: 18px;
            font-weight: 600;
            margin: 20px 0 15px;
            color: var(--primary-dark);
            border-left: 4px solid var(--primary);
            padding-left: 10px;
        }
        
        .dashboard-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .chart-container {
            height: 250px;
            position: relative;
        }
        
        .chart-legend {
            display: flex;
            justify-content: center;
            margin-top: 15px;
            gap: 20px;
        }
        
        .legend-item {
            display: flex;
            align-items: center;
        }
        
        .legend-color {
            width: 12px;
            height: 12px;
            border-radius: 3px;
            margin-right: 8px;
        }
        
        .legend-label {
            font-size: 13px;
            color: var(--gray);
        }
        
        .resource-section {
            margin-bottom: 20px;
        }
        
        .resource-section:last-child {
            margin-bottom: 0;
        }
        
        .resource-section-title {
            font-weight: 600;
            margin-bottom: 10px;
            color: var(--primary-dark);
            font-size: 15px;
        }
        
        .resource-usage {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .resource-label {
            width: 80px;
            font-size: 13px;
            color: var(--gray);
        }
        
        .resource-bar {
            flex: 1;
            height: 8px;
            background: rgba(0,0,0,0.05);
            border-radius: 4px;
            overflow: hidden;
            position: relative;
            margin-right: 10px;
        }
        
        .resource-bar-fill {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            border-radius: 4px;
        }
        
        .resource-value {
            width: 50px;
            text-align: right;
            font-size: 13px;
            font-weight: 500;
        }
        
        .resource-detail {
            display: flex;
            justify-content: space-between;
            margin-top: 15px;
        }

        /* 系统资源监控样式 */
        .system-resources {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        /* 通知样式 */
        .notification-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-width: 350px;
        }
        
        .notification {
            display: flex;
            align-items: center;
            padding: 15px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            margin-bottom: 10px;
            animation: slide-in 0.3s ease-out forwards;
            position: relative;
            border-left: 4px solid #2196f3;
        }
        
        .notification.success {
            border-left-color: #4caf50;
        }
        
        .notification.warning {
            border-left-color: #ff9800;
        }
        
        .notification.error {
            border-left-color: #f44336;
        }
        
        .notification-icon {
            margin-right: 12px;
            font-size: 20px;
            color: #2196f3;
        }
        
        .notification.success .notification-icon {
            color: #4caf50;
        }
        
        .notification.warning .notification-icon {
            color: #ff9800;
        }
        
        .notification.error .notification-icon {
            color: #f44336;
        }
        
        .notification-message {
            flex: 1;
            font-size: 14px;
            color: #333;
        }
        
        .notification-close {
            cursor: pointer;
            color: #999;
            padding: 5px;
            margin-left: 10px;
            transition: color 0.2s;
        }
        
        .notification-close:hover {
            color: #333;
        }
        
        .notification.fade-out {
            opacity: 0;
            transform: translateX(30px);
            transition: opacity 0.3s, transform 0.3s;
        }
        
        @keyframes slide-in {
            from {
                opacity: 0;
                transform: translateX(30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        /* 值更新动画 */
        .value-update {
            animation: pulse 1s ease;
        }
        
        @keyframes pulse {
            0% {
                color: var(--primary-dark);
            }
            50% {
                color: #4caf50;
            }
            100% {
                color: var(--primary-dark);
            }
        }
        
        /* 按钮点击效果 */
        .btn {
            position: relative;
            overflow: hidden;
        }
        
        .btn::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.3);
            opacity: 0;
            border-radius: 4px;
            transform: translate(-50%, -50%) scale(0);
            transition: transform 0.3s, opacity 0.3s;
        }
        
        .btn:active::after {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
            transition: 0s;
        }
        
        /* 资源监控动画 */
        .resource-bar-fill {
            transition: width 0.8s ease;
        }
        
        /* 卡片悬停特效 */
        .card {
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }

        /* 内容区域样式 */
        .content {
            padding: 20px;
        }

        /* 模型状态网格布局 */
        .model-status {
            margin-bottom: 30px;
        }

        .model-status-card {
            width: 100%;
        }

        .model-status-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 20px;
            padding: 10px;
        }

        .model-status-item {
            display: flex;
            align-items: center;
            padding: 15px;
            background-color: #f9f9f9;
            border-radius: 10px;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .model-status-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        }

        .model-status-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .model-status-info {
            flex: 1;
        }

        .model-status-name {
            font-weight: 500;
            color: #666;
            font-size: 14px;
            margin-bottom: 5px;
        }

        .model-status-value {
            font-weight: 600;
            color: #333;
            font-size: 18px;
            margin-bottom: 3px;
        }

        .model-status-detail {
            font-size: 13px;
            color: #888;
        }
        
        /* 修改点击效果为在页面内显示 */
        .modal-box {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            max-width: 500px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }
        
        .modal-box.show {
            opacity: 1;
            visibility: visible;
        }
        
        .modal-header {
            padding: 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .modal-title {
            font-weight: 600;
            font-size: 18px;
        }
        
        .modal-close {
            cursor: pointer;
            font-size: 20px;
            color: #999;
            transition: color 0.2s;
        }
        
        .modal-close:hover {
            color: #333;
        }
        
        .modal-body {
            padding: 20px;
        }
        
        .modal-footer {
            padding: 15px 20px;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 999;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }
        
        .modal-overlay.show {
            opacity: 1;
            visibility: visible;
        }
    </style>
</head>
<body>
    <!-- 侧边栏 -->
    <div class="sidebar">
        <div class="sidebar-header">
            <div class="sidebar-logo">
                <i class="fas fa-industry"></i>
            </div>
            <div class="sidebar-title">转炉终点预测系统</div>
        </div>
        <div class="sidebar-menu">
            <div class="sidebar-menu-title">主导航</div>
            <ul>
                <li><a href="index.html" class="active"><i class="fas fa-home"></i>首页</a></li>
                <li><a href="production-monitor.html"><i class="fas fa-chart-line"></i>生产监控</a></li>
                <li><a href="history-data.html"><i class="fas fa-history"></i>历史数据</a></li>
                <li><a href="quality-analysis.html"><i class="fas fa-flask"></i>质量分析</a></li>
            </ul>
            
            <div class="sidebar-menu-title">模型管理</div>
            <ul>
                <li><a href="model-details.html"><i class="fas fa-brain"></i>模型详情</a></li>
                <li><a href="model-config.html"><i class="fas fa-cogs"></i>模型配置</a></li>
                <li><a href="model-performance.html"><i class="fas fa-chart-bar"></i>模型性能</a></li>
                <li><a href="model-update.html"><i class="fas fa-sync-alt"></i>模型更新</a></li>
            </ul>
            
            <div class="sidebar-menu-title">系统设置</div>
            <ul>
                <li><a href="system-settings.html"><i class="fas fa-cog"></i>系统设置</a></li>
                <li><a href="user-management.html"><i class="fas fa-user-cog"></i>用户管理</a></li>
                <li><a href="alert-settings.html"><i class="fas fa-bell"></i>预警设置</a></li>
                <li><a href="data-management.html"><i class="fas fa-database"></i>数据管理</a></li>
                <li><a href="online-analysis.html"><i class="fas fa-chart-bar"></i>在线分析</a></li>
            </ul>
        </div>
        <div class="sidebar-footer">
            <i class="fas fa-info-circle"></i>
            <span>系统版本：v2.5.3</span>
        </div>
    </div>

    <!-- 侧边栏遮罩层 -->
    <div class="sidebar-overlay"></div>

    <div class="container">
        <div class="header">
            <div class="header-left">
                <div>
                    <div class="title">首页</div>
                    <div class="subtitle">系统概览与关键指标</div>
                </div>
            </div>
            <div class="header-right">
                <div class="header-icon">
                    <i class="fas fa-search"></i>
                </div>
                <div class="header-icon">
                    <i class="fas fa-bell"></i>
                    <span class="notification-badge">3</span>
                </div>
                <div class="dropdown">
                    <div class="user-dropdown dropdown-trigger">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="用户头像" class="user-avatar">
                        <span class="user-name">管理员</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="dropdown-menu">
                        <a href="#" class="dropdown-item">
                            <i class="fas fa-user"></i>
                            <span>个人资料</span>
                        </a>
                        <a href="#" class="dropdown-item">
                            <i class="fas fa-cog"></i>
                            <span>账号设置</span>
                        </a>
                        <a href="#" class="dropdown-item">
                            <i class="fas fa-question-circle"></i>
                            <span>帮助中心</span>
                        </a>
                        <a href="login.html" class="dropdown-item">
                            <i class="fas fa-sign-out-alt"></i>
                            <span>退出登录</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="content">
            <!-- 快速访问区域 - 移到顶部 -->
            <div class="section-title">快速访问</div>
            <div class="quick-access">
                <a href="model-details.html" class="quick-access-card">
                    <div class="quick-access-icon">
                        <i class="fas fa-brain"></i>
                    </div>
                    <div class="quick-access-title">模型详情</div>
                </a>
                
                <a href="model-performance.html" class="quick-access-card">
                    <div class="quick-access-icon">
                        <i class="fas fa-chart-bar"></i>
                    </div>
                    <div class="quick-access-title">模型性能</div>
                </a>
                
                <a href="online-analysis.html" class="quick-access-card">
                    <div class="quick-access-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <div class="quick-access-title">在线分析</div>
                </a>
                
                <a href="production-monitor.html" class="quick-access-card">
                    <div class="quick-access-icon">
                        <i class="fas fa-industry"></i>
                    </div>
                    <div class="quick-access-title">生产监控</div>
                </a>
                
                <a href="system-settings.html" class="quick-access-card">
                    <div class="quick-access-icon">
                        <i class="fas fa-cog"></i>
                    </div>
                    <div class="quick-access-title">系统设置</div>
                </a>
                
                <a href="user-management.html" class="quick-access-card">
                    <div class="quick-access-icon">
                        <i class="fas fa-user-cog"></i>
                    </div>
                    <div class="quick-access-title">用户管理</div>
                </a>
            </div>

            <!-- 仪表板卡片 -->
            <div class="section-title">关键指标</div>
            <div class="dashboard-cards">
                <div class="card dashboard-card">
                    <div class="dashboard-card-content">
                        <div class="dashboard-card-value">94.2%</div>
                        <div class="dashboard-card-label">预测准确率</div>
                        <div class="trend-indicator up">
                            <i class="fas fa-arrow-up"></i>
                            <span>1.2%</span>
                        </div>
                    </div>
                    <div class="dashboard-card-icon" style="background-color: rgba(33, 150, 243, 0.1); color: #2196f3;">
                        <i class="fas fa-chart-line"></i>
                    </div>
                </div>
                
                <div class="card dashboard-card">
                    <div class="dashboard-card-content">
                        <div class="dashboard-card-value">98.5%</div>
                        <div class="dashboard-card-label">系统在线率</div>
                        <div class="trend-indicator up">
                            <i class="fas fa-arrow-up"></i>
                            <span>1.2%</span>
                        </div>
                    </div>
                    <div class="dashboard-card-icon" style="background-color: rgba(33, 150, 243, 0.1); color: #2196f3;">
                        <i class="fas fa-server"></i>
                    </div>
                </div>
                
                <div class="card dashboard-card">
                    <div class="dashboard-card-content">
                        <div class="dashboard-card-value">127</div>
                        <div class="dashboard-card-label">今日炉次</div>
                        <div class="trend-indicator up">
                            <i class="fas fa-arrow-up"></i>
                            <span>12</span>
                        </div>
                    </div>
                    <div class="dashboard-card-icon" style="background-color: rgba(255, 152, 0, 0.1); color: #ff9800;">
                        <i class="fas fa-fire"></i>
                    </div>
                </div>
                
                <div class="card dashboard-card">
                    <div class="dashboard-card-content">
                        <div class="dashboard-card-value">8</div>
                        <div class="dashboard-card-label">预警信息</div>
                        <div class="trend-indicator down">
                            <i class="fas fa-arrow-down"></i>
                            <span>3</span>
                        </div>
                    </div>
                    <div class="dashboard-card-icon" style="background-color: rgba(244, 67, 54, 0.1); color: #f44336;">
                        <i class="fas fa-exclamation-triangle"></i>
                    </div>
                </div>
            </div>

            <!-- 实时监控卡片 -->
            <div class="section-title">实时监控</div>
            <div class="real-time-monitoring">
                <div class="card real-time-card">
                    <div class="card-header">
                        <div class="card-title">
                            <i class="fas fa-chart-line"></i>
                            实时预测精度
                        </div>
                        <div class="card-actions">
                            <button class="btn btn-sm btn-outline">
                                <i class="fas fa-expand"></i>
                            </button>
                        </div>
                    </div>
                    <div class="card-content">
                        <div class="chart-container">
                            <canvas id="accuracyChart"></canvas>
                        </div>
                    </div>
                </div>
                
                <div class="card real-time-card">
                    <div class="card-header">
                        <div class="card-title">
                            <i class="fas fa-fire-alt"></i>
                            转炉运行状态
                        </div>
                        <div class="card-actions">
                            <button class="btn btn-sm btn-outline">
                                <i class="fas fa-expand"></i>
                            </button>
                        </div>
                    </div>
                    <div class="card-content">
                        <div class="furnace-status">
                            <div class="furnace-item active">
                                <div class="furnace-icon">
                                    <i class="fas fa-fire"></i>
                                </div>
                                <div class="furnace-info">
                                    <div class="furnace-name">1号转炉</div>
                                    <div class="furnace-state">冶炼中</div>
                                    <div class="furnace-progress">
                                        <div class="progress-bar">
                                            <div class="progress-fill" style="width: 78%;"></div>
                                        </div>
                                        <div class="progress-value">78%</div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="furnace-item active">
                                <div class="furnace-icon">
                                    <i class="fas fa-fire"></i>
                                </div>
                                <div class="furnace-info">
                                    <div class="furnace-name">2号转炉</div>
                                    <div class="furnace-state">冶炼中</div>
                                    <div class="furnace-progress">
                                        <div class="progress-bar">
                                            <div class="progress-fill" style="width: 45%;"></div>
                                        </div>
                                        <div class="progress-value">45%</div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="furnace-item inactive">
                                <div class="furnace-icon">
                                    <i class="fas fa-fire"></i>
                                </div>
                                <div class="furnace-info">
                                    <div class="furnace-name">3号转炉</div>
                                    <div class="furnace-state">检修中</div>
                                    <div class="furnace-progress">
                                        <div class="progress-bar">
                                            <div class="progress-fill" style="width: 0%;"></div>
                                        </div>
                                        <div class="progress-value">0%</div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="furnace-item active">
                                <div class="furnace-icon">
                                    <i class="fas fa-fire"></i>
                                </div>
                                <div class="furnace-info">
                                    <div class="furnace-name">4号转炉</div>
                                    <div class="furnace-state">准备中</div>
                                    <div class="furnace-progress">
                                        <div class="progress-bar">
                                            <div class="progress-fill" style="width: 12%;"></div>
                                        </div>
                                        <div class="progress-value">12%</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 系统资源监控 -->
            <div class="section-title">系统资源监控</div>
            <div class="system-resources">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">
                            <i class="fas fa-server"></i>
                            服务器资源使用率
                        </div>
                        <div class="card-actions">
                            <button class="btn btn-sm btn-outline">
                                <i class="fas fa-sync-alt"></i>
                            </button>
                        </div>
                    </div>
                    <div class="card-content">
                        <div class="resource-section">
                            <div class="resource-section-title">CPU 使用率</div>
                            <div class="resource-usage">
                                <div class="resource-label">总体</div>
                                <div class="resource-bar">
                                    <div class="resource-bar-fill" style="width: 45%; background-color: #2196f3;"></div>
                                </div>
                                <div class="resource-value">45%</div>
                            </div>
                            <div class="resource-usage">
                                <div class="resource-label">核心 1</div>
                                <div class="resource-bar">
                                    <div class="resource-bar-fill" style="width: 38%; background-color: #2196f3;"></div>
                                </div>
                                <div class="resource-value">38%</div>
                            </div>
                            <div class="resource-usage">
                                <div class="resource-label">核心 2</div>
                                <div class="resource-bar">
                                    <div class="resource-bar-fill" style="width: 52%; background-color: #2196f3;"></div>
                                </div>
                                <div class="resource-value">52%</div>
                            </div>
                        </div>
                        
                        <div class="resource-section">
                            <div class="resource-section-title">内存使用率</div>
                            <div class="resource-usage">
                                <div class="resource-label">物理内存</div>
                                <div class="resource-bar">
                                    <div class="resource-bar-fill" style="width: 62%; background-color: #ff9800;"></div>
                                </div>
                                <div class="resource-value">62%</div>
                            </div>
                            <div class="resource-detail">
                                <span>总计: 32GB</span>
                                <span>已用: 19.8GB</span>
                                <span>可用: 12.2GB</span>
                            </div>
                        </div>
                        
                        <div class="resource-section">
                            <div class="resource-section-title">磁盘使用率</div>
                            <div class="resource-usage">
                                <div class="resource-label">主磁盘</div>
                                <div class="resource-bar">
                                    <div class="resource-bar-fill" style="width: 78%; background-color: #f44336;"></div>
                                </div>
                                <div class="resource-value">78%</div>
                            </div>
                            <div class="resource-usage">
                                <div class="resource-label">数据磁盘</div>
                                <div class="resource-bar">
                                    <div class="resource-bar-fill" style="width: 42%; background-color: #4caf50;"></div>
                                </div>
                                <div class="resource-value">42%</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">
                            <i class="fas fa-database"></i>
                            数据库状态
                        </div>
                        <div class="card-actions">
                            <button class="btn btn-sm btn-outline">
                                <i class="fas fa-sync-alt"></i>
                            </button>
                        </div>
                    </div>
                    <div class="card-content">
                        <div class="resource-section">
                            <div class="resource-section-title">连接状态</div>
                            <div class="resource-usage">
                                <div class="resource-label">活跃连接</div>
                                <div class="resource-bar">
                                    <div class="resource-bar-fill" style="width: 32%; background-color: #2196f3;"></div>
                                </div>
                                <div class="resource-value">32/100</div>
                            </div>
                        </div>
                        
                        <div class="resource-section">
                            <div class="resource-section-title">查询性能</div>
                            <div class="resource-usage">
                                <div class="resource-label">查询耗时</div>
                                <div class="resource-bar">
                                    <div class="resource-bar-fill" style="width: 25%; background-color: #4caf50;"></div>
                                </div>
                                <div class="resource-value">45ms</div>
                            </div>
                        </div>
                        
                        <div class="resource-section">
                            <div class="resource-section-title">备份状态</div>
                            <div class="resource-usage">
                                <div class="resource-label">上次备份</div>
                                <div class="resource-bar">
                                    <div class="resource-bar-fill" style="width: 100%; background-color: #4caf50;"></div>
                                </div>
                                <div class="resource-value">完成</div>
                            </div>
                            <div class="resource-detail">
                                <span>备份时间: 2023-06-15 03:00</span>
                                <span>备份大小: 1.8GB</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 模型运行状态 - 优化样式 -->
            <div class="section-title">模型运行状态</div>
            <div class="model-status">
                <div class="card model-status-card">
                    <div class="card-header">
                        <div class="card-title">
                            <i class="fas fa-brain"></i>
                            预测模型状态监控
                        </div>
                        <div class="card-actions">
                            <button class="btn btn-sm btn-outline refresh-btn">
                                <i class="fas fa-sync-alt"></i>
                            </button>
                        </div>
                    </div>
                    <div class="card-content">
                        <div class="model-status-grid">
                            <div class="model-status-item">
                                <div class="model-status-icon" style="background-color: rgba(76, 175, 80, 0.1); color: #4caf50;">
                                    <i class="fas fa-check-circle"></i>
                                </div>
                                <div class="model-status-info">
                                    <div class="model-status-name">主预测模型</div>
                                    <div class="model-status-value">正常运行中</div>
                                    <div class="model-status-detail">可用率: 98.6%</div>
                                </div>
                            </div>
                            
                            <div class="model-status-item">
                                <div class="model-status-icon" style="background-color: rgba(255, 152, 0, 0.1); color: #ff9800;">
                                    <i class="fas fa-exclamation-triangle"></i>
                                </div>
                                <div class="model-status-info">
                                    <div class="model-status-name">备用预测模型</div>
                                    <div class="model-status-value">警告</div>
                                    <div class="model-status-detail">精度下降</div>
                                </div>
                            </div>
                            
                            <div class="model-status-item">
                                <div class="model-status-icon" style="background-color: rgba(33, 150, 243, 0.1); color: #2196f3;">
                                    <i class="fas fa-exchange-alt"></i>
                                </div>
                                <div class="model-status-info">
                                    <div class="model-status-name">API调用</div>
                                    <div class="model-status-value">18/分钟</div>
                                    <div class="model-status-detail">上升 5.2%</div>
                                </div>
                            </div>
                            
                            <div class="model-status-item">
                                <div class="model-status-icon" style="background-color: rgba(156, 39, 176, 0.1); color: #9c27b0;">
                                    <i class="fas fa-clock"></i>
                                </div>
                                <div class="model-status-info">
                                    <div class="model-status-name">上次模型训练</div>
                                    <div class="model-status-value">2小时前</div>
                                    <div class="model-status-detail">准确率+1.2%</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 系统信息 -->
            <div class="system-info">
                <div class="card" style="flex: 2;">
                    <div class="card-header">
                        <div class="card-title">
                            <i class="fas fa-info-circle"></i>
                            系统信息
                        </div>
                    </div>
                    <div class="card-content">
                        <p>转炉终点预测系统是一套基于深度学习的智能冶炼辅助系统，通过实时分析转炉生产过程中的各项参数，预测转炉冶炼的终点状态，包括终点温度、碳含量和其他重要指标。</p>
                        <p>该系统采用先进的LSTM-GRU混合神经网络架构，结合冶金专家知识构建，预测准确率达到94.2%，为炼钢工艺提供精确的数据支持和决策建议。</p>
                        
                        <div style="margin-top: 20px;">
                            <div class="collapsible">
                                <div class="collapsible-header collapsible-trigger">
                                    <div class="collapsible-title">
                                        <i class="fas fa-star"></i>
                                        系统特点
                                    </div>
                                    <i class="fas fa-chevron-down"></i>
                                </div>
                                <div class="collapsible-content">
                                    <ul style="padding-left: 20px; margin-bottom: 0;">
                                        <li>高精度终点温度和成分预测</li>
                                        <li>实时数据采集与分析</li>
                                        <li>炉次异常预警与诊断</li>
                                        <li>工艺参数优化建议</li>
                                        <li>模型自适应学习与更新</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card" style="flex: 1;">
                    <div class="card-header">
                        <div class="card-title">
                            <i class="fas fa-bell"></i>
                            最新通知
                        </div>
                    </div>
                    <div class="card-content">
                        <div class="notification-item">
                            <div class="notification-icon" style="background-color: rgba(33, 150, 243, 0.1); color: #2196f3;">
                                <i class="fas fa-sync-alt"></i>
                            </div>
                            <div class="notification-content">
                                <div class="notification-title">系统更新</div>
                                <div class="notification-text">系统已更新至v2.5.3版本</div>
                                <div class="notification-time">2小时前</div>
                            </div>
                        </div>
                        
                        <div class="notification-item">
                            <div class="notification-icon" style="background-color: rgba(76, 175, 80, 0.1); color: #4caf50;">
                                <i class="fas fa-chart-line"></i>
                            </div>
                            <div class="notification-content">
                                <div class="notification-title">模型性能提升</div>
                                <div class="notification-text">预测准确率提升2.3%</div>
                                <div class="notification-time">昨天</div>
                            </div>
                        </div>
                        
                        <div class="notification-item">
                            <div class="notification-icon" style="background-color: rgba(255, 152, 0, 0.1); color: #ff9800;">
                                <i class="fas fa-exclamation-triangle"></i>
                            </div>
                            <div class="notification-content">
                                <div class="notification-title">预警信息</div>
                                <div class="notification-text">3号转炉温度异常</div>
                                <div class="notification-time">2天前</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 模态框和遮罩 -->
    <div class="modal-overlay" id="modalOverlay"></div>
    
    <!-- 模态框模板 -->
    <div class="modal-box" id="commonModal">
        <div class="modal-header">
            <div class="modal-title">模态框标题</div>
            <div class="modal-close">×</div>
        </div>
        <div class="modal-body">
            模态框内容将在这里显示
        </div>
        <div class="modal-footer">
            <button class="btn btn-sm btn-outline modal-cancel">取消</button>
            <button class="btn btn-sm btn-primary modal-confirm">确认</button>
        </div>
    </div>

    <!-- JavaScript引用 -->
    <script src="scripts/unified.js"></script>
    <script src="scripts/modal-dialog.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化下拉菜单
            initDropdowns();
            
            // 初始化折叠面板
            initCollapsibles();
            
            // 初始化实时预测精度图表
            const accuracyCtx = document.getElementById('accuracyChart');
            if(accuracyCtx) {
                const accuracyChart = new Chart(accuracyCtx.getContext('2d'), {
                    type: 'line',
                    data: {
                        labels: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'],
                        datasets: [{
                            label: '预测精度',
                            data: [92.5, 93.1, 94.2, 93.8, 93.5, 94.5, 95.0, 94.8, 94.2, 93.7, 94.3, 94.7],
                            borderColor: '#2196f3',
                            backgroundColor: 'rgba(33, 150, 243, 0.1)',
                            borderWidth: 2,
                            fill: true,
                            tension: 0.3,
                            pointRadius: 3,
                            pointBackgroundColor: '#2196f3',
                            pointBorderColor: '#fff',
                            pointBorderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                display: false
                            },
                            tooltip: {
                                mode: 'index',
                                intersect: false,
                                backgroundColor: 'rgba(255, 255, 255, 0.9)',
                                titleColor: '#333',
                                bodyColor: '#666',
                                borderColor: 'rgba(33, 150, 243, 0.3)',
                                borderWidth: 1,
                                cornerRadius: 8,
                                padding: 12,
                                boxPadding: 6,
                                titleFont: {
                                    weight: 'bold',
                                    size: 13
                                },
                                bodyFont: {
                                    size: 12
                                },
                                displayColors: false
                            }
                        },
                        scales: {
                            x: {
                                grid: {
                                    display: false
                                },
                                ticks: {
                                    color: '#999'
                                }
                            },
                            y: {
                                min: 90,
                                max: 100,
                                grid: {
                                    color: 'rgba(0, 0, 0, 0.05)'
                                },
                                ticks: {
                                    color: '#999',
                                    callback: function(value) {
                                        return value + '%';
                                    }
                                }
                            }
                        }
                    }
                });
            }
            
            // 初始化模态框功能
            initModals();
            
            // 为所有刷新按钮添加点击事件
            document.querySelectorAll('.refresh-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    showNotification('刷新成功', '数据已更新', 'success');
                });
            });
            
            // 为快速访问卡片添加点击事件
            document.querySelectorAll('.quick-access-card').forEach(card => {
                card.addEventListener('click', function(e) {
                    const href = this.getAttribute('href');
                    if(href && href !== '#') {
                        // 正常导航
                        return;
                    }
                    
                    e.preventDefault();
                    const title = this.querySelector('.quick-access-title').textContent;
                    showModal(title, `您点击了"${title}"模块，此功能正在开发中...`, function() {
                        showNotification('操作成功', `您确认了"${title}"操作`, 'success');
                    });
                });
            });
            
            // 为模型状态项添加点击事件
            document.querySelectorAll('.model-status-item').forEach(item => {
                item.addEventListener('click', function() {
                    const modelName = this.querySelector('.model-status-name').textContent;
                    const modelStatus = this.querySelector('.model-status-value').textContent;
                    
                    showModal('模型详情', `
                        <div style="margin-bottom: 15px;">
                            <strong>模型名称:</strong> ${modelName}
                        </div>
                        <div style="margin-bottom: 15px;">
                            <strong>当前状态:</strong> ${modelStatus}
                        </div>
                        <div style="margin-bottom: 15px;">
                            <strong>模型类型:</strong> LSTM-GRU混合神经网络
                        </div>
                        <div style="margin-bottom: 15px;">
                            <strong>训练集大小:</strong> 24,567条数据
                        </div>
                        <div style="margin-bottom: 15px;">
                            <strong>最后更新:</strong> 2023-06-15 10:23
                        </div>
                    `);
                });
            });
            
            // 展示通知
            setTimeout(() => {
                showNotification('欢迎回来', '系统已加载完成', 'info');
            }, 1000);
        });
        
        // 初始化模态框
        function initModals() {
            const modalOverlay = document.getElementById('modalOverlay');
            const commonModal = document.getElementById('commonModal');
            const closeButton = commonModal.querySelector('.modal-close');
            const cancelButton = commonModal.querySelector('.modal-cancel');
            
            // 关闭模态框函数
            function closeModal() {
                modalOverlay.classList.remove('show');
                commonModal.classList.remove('show');
            }
            
            // 点击关闭按钮
            closeButton.addEventListener('click', closeModal);
            
            // 点击取消按钮
            cancelButton.addEventListener('click', closeModal);
            
            // 点击遮罩层关闭
            modalOverlay.addEventListener('click', closeModal);
            
            // 阻止模态框内点击事件冒泡
            commonModal.addEventListener('click', function(e) {
                e.stopPropagation();
            });
        }
        
        // 显示模态框
        function showModal(title, content, confirmCallback) {
            const modalOverlay = document.getElementById('modalOverlay');
            const commonModal = document.getElementById('commonModal');
            const modalTitle = commonModal.querySelector('.modal-title');
            const modalBody = commonModal.querySelector('.modal-body');
            const confirmButton = commonModal.querySelector('.modal-confirm');
            
            // 设置内容
            modalTitle.textContent = title;
            modalBody.innerHTML = content;
            
            // 显示模态框
            modalOverlay.classList.add('show');
            commonModal.classList.add('show');
            
            // 确认按钮事件
            if(typeof confirmCallback === 'function') {
                confirmButton.onclick = function() {
                    confirmCallback();
                    modalOverlay.classList.remove('show');
                    commonModal.classList.remove('show');
                };
            } else {
                confirmButton.onclick = function() {
                    modalOverlay.classList.remove('show');
                    commonModal.classList.remove('show');
                };
            }
        }
        
        // 显示通知
        function showNotification(title, message, type = 'info') {
            // 创建通知容器
            let container = document.querySelector('.notification-container');
            if (!container) {
                container = document.createElement('div');
                container.className = 'notification-container';
                document.body.appendChild(container);
            }
            
            // 创建通知元素
            const notification = document.createElement('div');
            notification.className = `notification ${type}`;
            
            // 根据类型设置图标
            let icon = 'info-circle';
            if (type === 'success') icon = 'check-circle';
            if (type === 'warning') icon = 'exclamation-triangle';
            if (type === 'error') icon = 'times-circle';
            
            // 设置通知内容
            notification.innerHTML = `
                <div class="notification-icon">
                    <i class="fas fa-${icon}"></i>
                </div>
                <div class="notification-message">
                    <strong>${title}</strong>
                    <div>${message}</div>
                </div>
                <div class="notification-close">
                    <i class="fas fa-times"></i>
                </div>
            `;
            
            // 添加到容器
            container.appendChild(notification);
            
            // 关闭按钮事件
            const closeBtn = notification.querySelector('.notification-close');
            closeBtn.addEventListener('click', function() {
                notification.classList.add('fade-out');
                setTimeout(() => {
                    notification.remove();
                }, 300);
            });
            
            // 自动关闭
            setTimeout(() => {
                notification.classList.add('fade-out');
                setTimeout(() => {
                    notification.remove();
                }, 300);
            }, 5000);
        }
    </script>

    <style>
        /* 首页特有样式 */
        .section-title {
            font-size: 18px;
            font-weight: 600;
            margin: 20px 0 15px;
            color: var(--primary-dark);
            border-left: 4px solid var(--primary);
            padding-left: 10px;
        }
        
        .dashboard-cards {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .dashboard-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px;
            transition: transform 0.3s, box-shadow 0.3s;
            position: relative;
            overflow: hidden;
        }
        
        .dashboard-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
        }
        
        .dashboard-card:before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle at top right, rgba(255,255,255,0.3), transparent 70%);
            z-index: 0;
        }
        
        .dashboard-card-content {
            z-index: 1;
        }
        
        .dashboard-card-value {
            font-size: 28px;
            font-weight: 700;
            color: var(--primary-dark);
        }
        
        .dashboard-card-label {
            color: var(--gray);
            margin-top: 5px;
            font-size: 14px;
        }
        
        .dashboard-card-icon {
            width: 60px;
            height: 60px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            z-index: 1;
            transition: transform 0.3s;
        }
        
        .dashboard-card:hover .dashboard-card-icon {
            transform: scale(1.1);
        }
        
        .trend-indicator {
            display: flex;
            align-items: center;
            font-size: 12px;
            margin-top: 8px;
            font-weight: 500;
        }
        
        .trend-indicator.up {
            color: #4caf50;
        }
        
        .trend-indicator.down {
            color: #f44336;
        }
        
        .trend-indicator i {
            margin-right: 5px;
            font-size: 10px;
        }
        
        .real-time-monitoring {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .chart-container {
            height: 250px;
            position: relative;
        }
        
        .furnace-status {
            padding: 10px 0;
        }
        
        .furnace-item {
            display: flex;
            align-items: center;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 10px;
            transition: all 0.3s;
        }
        
        .furnace-item.active {
            background-color: rgba(76, 175, 80, 0.05);
        }
        
        .furnace-item.inactive {
            background-color: rgba(158, 158, 158, 0.05);
        }
        
        .furnace-icon {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 18px;
        }
        
        .furnace-item.active .furnace-icon {
            background-color: rgba(76, 175, 80, 0.1);
            color: #4caf50;
        }
        
        .furnace-item.inactive .furnace-icon {
            background-color: rgba(158, 158, 158, 0.1);
            color: #9e9e9e;
        }
        
        .furnace-info {
            flex: 1;
        }
        
        .furnace-name {
            font-weight: 500;
            margin-bottom: 3px;
        }
        
        .furnace-state {
            font-size: 13px;
            color: var(--gray);
            margin-bottom: 8px;
        }
        
        .furnace-progress {
            display: flex;
            align-items: center;
        }
        
        .progress-bar {
            flex: 1;
            height: 6px;
            background-color: rgba(0,0,0,0.05);
            border-radius: 3px;
            overflow: hidden;
            margin-right: 10px;
        }
        
        .progress-fill {
            height: 100%;
            background-color: var(--primary);
            border-radius: 3px;
        }
        
        .progress-value {
            font-size: 12px;
            font-weight: 500;
            color: var(--gray);
        }
        
        .quick-access {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .quick-access-card {
            background-color: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow-sm);
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: all 0.3s;
            color: var(--text-color);
            text-decoration: none;
            position: relative;
            overflow: hidden;
        }
        
        .quick-access-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow);
            color: var(--primary);
        }
        
        .quick-access-card:before {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 80px;
            height: 80px;
            background: radial-gradient(circle at bottom right, rgba(25, 118, 210, 0.05), transparent 70%);
            z-index: 0;
        }
        
        .quick-access-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: #f44336;
            color: white;
            font-size: 11px;
            font-weight: 500;
            padding: 3px 6px;
            border-radius: 4px;
        }
        
        .quick-access-icon {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            background-color: rgba(25, 118, 210, 0.1);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin-bottom: 15px;
            transition: transform 0.3s;
            position: relative;
            z-index: 1;
        }
        
        .quick-access-card:hover .quick-access-icon {
            transform: scale(1.1);
            background-color: var(--primary);
            color: white;
        }
        
        .quick-access-title {
            font-weight: 500;
            text-align: center;
            margin-bottom: 5px;
            position: relative;
            z-index: 1;
        }
        
        .quick-access-desc {
            font-size: 12px;
            text-align: center;
            color: var(--gray);
            position: relative;
            z-index: 1;
        }
        
        .system-info-section {
            margin-bottom: 30px;
        }
        
        .system-info {
            display: flex;
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .notification-item {
            display: flex;
            align-items: flex-start;
            padding: 10px 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }
        
        .notification-item:last-child {
            border-bottom: none;
        }
        
        .notification-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            flex-shrink: 0;
        }
        
        .notification-content {
            flex: 1;
        }
        
        .notification-title {
            font-weight: 500;
            margin-bottom: 3px;
        }
        
        .notification-text {
            color: var(--gray);
            font-size: 13px;
            margin-bottom: 3px;
        }
        
        .notification-time {
            color: var(--gray);
            font-size: 12px;
        }
        
        .quality-metrics {
            display: flex;
            flex-direction: column;
        }
        
        .metrics-chart {
            height: 180px;
            margin-bottom: 20px;
        }
        
        .metrics-stats {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }
        
        .stat-item {
            margin-bottom: 10px;
        }
        
        .stat-label {
            font-size: 13px;
            color: var(--gray);
            margin-bottom: 5px;
        }
        
        .stat-value {
            font-size: 16px;
            font-weight: 600;
            color: var(--primary-dark);
            margin-bottom: 5px;
        }
        
        .stat-progress {
            width: 100%;
        }
        
        .model-analysis {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .model-card {
            overflow: hidden;
        }
        
        .model-header {
            display: flex;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }
        
        .model-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            background-color: rgba(25, 118, 210, 0.1);
            color: var(--primary);
        }
        
        .model-info {
            flex: 1;
        }
        
        .model-name {
            font-weight: 500;
            margin-bottom: 3px;
        }
        
        .model-type {
            font-size: 12px;
            color: var(--gray);
        }
        
        .model-accuracy {
            display: flex;
            align-items: center;
        }
        
        .accuracy-badge {
            background-color: rgba(76, 175, 80, 0.1);
            color: #4caf50;
            font-size: 14px;
            font-weight: 600;
            padding: 5px 10px;
            border-radius: 5px;
        }
        
        .model-content {
            padding: 15px;
        }
        
        .model-chart {
            height: 150px;
            margin-bottom: 15px;
        }
        
        .model-stats {
            border-top: 1px solid rgba(0, 0, 0, 0.05);
            padding-top: 15px;
        }
        
        .stat-row {
            display: flex;
            justify-content: space-between;
        }
        
        .stat-row .stat-item {
            flex: 1;
            text-align: center;
            margin-bottom: 0;
        }
        
        .stat-row .stat-value {
            font-size: 16px;
            margin-bottom: 3px;
        }
        
        .stat-row .stat-label {
            font-size: 12px;
        }
        
        @media (max-width: 768px) {
            .system-info, .real-time-monitoring, .model-analysis {
                grid-template-columns: 1fr;
            }
        }
    </style>
</body>
</html> 